// 屏幕往下滚动到一定程度时，搜索一栏固定在视口顶部
window.onload = function(){
    /*滚动条滚动，搜索区域固定视口代码块开始==========================*/
    //滚动条下拉到一定距离时，搜索一栏固定在视口顶部
    var searchInput = document.getElementsByClassName('searchInput')[0];
    //搜索区域的“分类”和“登陆”。正常情况下不显示，当屏幕下滑，搜索框显示时才显示
    var scroll_dis = document.querySelectorAll('.scroll_dis');
    var scrollPos = 0;

    window.onscroll = function(){
        // console.log('屏幕宽度 =>' + w);

        //屏幕宽度超过750
        if(w >= 750){
            scrollPos = html.scrollTop / (750 / 10);
            if(scrollPos >= 5) {
                //滚动条超过一定值，搜索区域添加searchPosFixed样式，固定在视口顶部
                searchInput.classList.add('searchPosFixed','searchBG');

                //搜索区域上的“分类”显示出来
                scroll_dis[0].classList.remove('scroll_dis');
                //搜索区域上的“登陆”显示出来
                scroll_dis[1].classList.remove('scroll_dis');

            }else {

                //移除搜索区域的视口固定
                searchInput.classList.remove('searchPosFixed','searchBG');

                //搜索区域上的“分类”隐藏起来
                scroll_dis[0].classList.add('scroll_dis');
                //搜索区域上的“登陆”隐藏起来
                scroll_dis[1].classList.add('scroll_dis');
            }
        }

        //屏幕宽度低于750
        if(w < 750){

            scrollPos = html.scrollTop / (w / 10);

            if(scrollPos >= 5) {

                //滚动条超过一定值，搜索区域添加searchPosFixed样式，固定在视口顶部
                searchInput.classList.add('searchPosFixed','searchBG');

                //搜索区域上的“分类”显示出来
                scroll_dis[0].classList.remove('scroll_dis');
                //搜索区域上的“登陆”显示出来
                scroll_dis[1].classList.remove('scroll_dis');

            }else {

                //移除搜索区域的视口固定
                searchInput.classList.remove('searchPosFixed','searchBG');

                //搜索区域上的“分类”隐藏起来
                scroll_dis[0].classList.add('scroll_dis');
                //搜索区域上的“登陆”隐藏起来
                scroll_dis[1].classList.add('scroll_dis');
            }

        }


        // 如果屏幕宽度超过750就用750除，得到rem数值
        // if(w > 750){
        //     if(html.scrollTop / (750 / 10) >= 5){
        //
        //         //判断search是否已经添加了fixed样式，如果没有则添加searchPosFixed样式
        //         if(searchInput.classList.contains('searchPosFixed') == false){
        //             searchInput.classList.add('searchPosFixed');
        //         }
        //
        //         //屏幕滚动回顶部小于1.15rem时则取消fixed定位
        //     }else if(html.scrollTop / (750 / 10) <= 1.15){
        //         if(searchInput.classList.contains('searchPosFixed') == true){
        //             searchInput.classList.remove('searchPosFixed');
        //         }
        //     }
        //
        //     //如果屏幕最大宽度没有超过750，则根据实际大小计算rem数值
        // }else if(html.scrollTop / (w / 10) >= 5){
        //     //判断search是否已经添加了fixed样式，如果没有fixed，则添加searchPosFixed样式
        //     if(searchInput.classList.contains('searchPosFixed') == false){
        //         searchInput.classList.add('searchPosFixed');
        //
        //         //屏幕滚动回顶部小于1.15rem时则取消fixed定位
        //     }else if(html.scrollTop / (750 / 10) <= 1.15){
        //         if(searchInput.classList.contains('searchPosFixed') == true){
        //             searchInput.classList.remove('searchPosFixed');
        //         }
        //     }
        // }


    }
    /*滚动条滚动，搜索区域固定视口代码块结束==========================*/


    /*轮播图代码块开始=============================*/
    var lbtUl = document.querySelector('.lbtWindow > ul');
    var width = 9.36;//每一张图的看宽度
    var nowImgIndex = 1;//记录第几张图
    var nowPos = -9.36;//轮播图当前的位置
    var direction = 'right';//方向
    var cycle = 2000;//周期
    var targetPos = null;
    var lbtBtn = document.getElementsByClassName('lbtBtn')[0];

    //自动轮播
    var time = setInterval(lbtFun, cycle);

    function lbtFun(){
        // 如果是默认的往右边走
        if(direction == 'right'){
            //计算目标位置
           targetPos = nowPos + (0 - width);

            lbtBtnFun();

           //如果目标位置已经超出最后一张，直接重置到第一张图片即可。
            if(targetPos < -56.16){
                //重置轮播图的位置
                nowPos = -9.36;
                lbtUl.style.marginLeft = nowPos + 'rem';
                targetPos = nowPos + (0 - width);
            }

            //每一张图片走动的具体效果。
           var time2 = setInterval(function(){
               //下一步的位置-9.36，-18.72，-28.02，-37.44，-46.8，-56.16(走完这个才能重置)
               nowPos += -0.1878;
               lbtUl.style.marginLeft = nowPos + 'rem';

               //当前图片展示完毕，走到目标位置
               if(nowPos <= targetPos){
                   nowPos = targetPos;
                   lbtUl.style.marginLeft = targetPos + 'rem';
                   clearInterval(time2);
               }
           },5);
        }

        //往左边走动
        // 如果是默认的往左边走
        if(direction == 'left'){
            //计算目标位置
            targetPos = nowPos + width;
            console.log('目标位置' + targetPos);

            //如果目标位置已经超出最后一张，直接重置到第一张图片即可。
            if(targetPos == 0){
                nowPos = -56.16;
                lbtUl.style.marginLeft = nowPos + 'rem';
                targetPos = nowPos + width;
            }

            //每一张图片走动的具体效果。
            var time2 = setInterval(function(){
                //下一步的位置-9.36，-18.72，-28.02，-37.44，-46.8，-56.16(走完这个才能重置)
                nowPos += 0.1878;
                lbtUl.style.marginLeft = nowPos + 'rem';

                //当前图片展示完毕，走到目标位置
                if(nowPos >= targetPos){
                    nowPos = targetPos;
                    lbtUl.style.marginLeft = targetPos + 'rem';
                    clearInterval(time2);
                }
            },5);
        }
    }

    //轮播图按钮
    function lbtBtnFun(){
        //取消轮播图按钮样式
        lbtBtn.children[nowImgIndex - 1].classList.remove('lbtBtnACtiv');

        //轮播图按钮索引
        nowImgIndex++;
        if(nowImgIndex == 6){
            nowImgIndex = 1;
        }
        //设置轮播图按钮样式
        lbtBtn.children[nowImgIndex - 1].classList.add('lbtBtnACtiv');
    }
    /*轮播图代码块结束=============================*/
}






// 待定